
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>测试 websocket 的使用</title>
</head>
<body>
  <input type="text" id="message">
  <button id="send-button">发送</button>

  <script>
    // 编写 js 使用 websocket 代码
    // 创建一个 websocket 实例
    let websocket = new WebSocket("ws://127.0.0.1:8080/test");

    // 给这个 websocket 注册上一些回调函数
    websocket.onopen = function(){
      // 连接建立完成后 , 就会自动执行
      console.log("websocket 连接成功!");
    }

    websocket.onclose = function(){
      // 连接断开后 , 就会自动执行到
      console.log("websocket 连接断开!");
    }

    websocket.onerror = function(){
      // 连接异常时, 自动执行到
      console.log("websocket 连接异常!");
    }

    websocket.onmessage = function(e){
      // 收到消息时,自动执行到
      console.log("websocket 收到消息! "+ e.data);
    }

    let messageInput = document.querySelector("#message");
    let sendButton = document.querySelector("#send-button");
    sendButton.onclick = function (){
      websocket.send(messageInput.value);
    }
  </script>
  
</body>
</html>
